<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
        }

        td {
            min-width: 50px;
            border: 1px solid;
        }

        .update {
            width: 300px;
            text-align: center;
            background-color: skyblue;
            padding: 20px;
            position: fixed;
            top: 100px;
            left: 300px;
            display: none;
        }

        input {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="insert">
        姓名<input type="text" id="insName" />
        <input type="radio" checked name="insSex" value="男" />男
        <input type="radio" name="insSex" value="女" />女
        年龄<input type="text" id="insAge" />
        <button id="insert">添加</button>
    </div>
    <table></table>
    <div class="update">
        姓名<input type="text" id="updName" /></br>
        <input type="radio" checked name="updSex" value="男" />男
        <input type="radio" name="updSex" value="女" />女</br>
        年龄<input type="text" id="updAge" /></br>
        <button id="update">修改</button>
    </div>

    <script>
        //默认数据
        let arr = [
            {
                name: 'Jack', gender: '男', age: 18,
                del: `<button>删除</button><button>修改</button>`
            },
            {
                name: 'Rose', gender: '女', age: 20,
                del: `<button>删除</button><button>修改</button>`
            },
            {
                name: 'Top', gender: '男', age: 22,
                del: `<button>删除</button><button>修改</button>`
            },
        ];
        let obj = {
            name: '名字',
            age: '性别',
            gender: '年龄',
            del: '操作'
        }
        //将默认数据渲染页面
        let table = document.querySelector('table');
        (() => {
            arr.forEach((v, index) => {
                if (index == 0) {
                    let tr = document.createElement('tr');
                    table.appendChild(tr);
                    for (const key in obj) {
                        let td = document.createElement('td');
                        tr.appendChild(td).innerHTML = obj[key];
                    }
                }
                let tr = document.createElement('tr');
                table.appendChild(tr);
                for (const key in v) {
                    let td = document.createElement('td');
                    tr.appendChild(td).innerHTML = v[key];
                }
            });
        })()
        //添加功能
        document.querySelector('#insert').onclick = () => {
            let name = document.querySelector('#insName').value
            let sex = document.querySelector('input[name="insSex"]:checked').value
            let age = document.querySelector('#insAge').value
            let tr = document.createElement('tr');
            tr.innerHTML = `<td>${name}</td><td>${sex}</td><td>${age}</td>
            <td><button>删除</button><button>修改</button></td>`
            table.appendChild(tr)
        }

        //操作功能部分
        table.addEventListener('click', function (e) {
            //删除功能
            if (e.target.innerHTML == '删除') {
                e.target.onclick = () => {
                    let trDom = e.target.parentElement.parentElement;
                    table.removeChild(trDom);
                }
            }
            //修改功能
            if (e.target.innerHTML == '修改') {
                e.target.onclick = () => {
                    document.querySelector('.update').style.display = 'block'
                    //点击修改按钮后无法操作table
                    table.style.pointerEvents = 'none'
                    let trDom = e.target.parentElement.parentElement;
                    document.querySelector('#update').onclick = () => {
                        let name = document.querySelector('#updName').value
                        let sex = document.querySelector('input[name="updSex"]:checked').value
                        let age = document.querySelector('#updAge').value
                        trDom.children[0].innerHTML = name;
                        trDom.children[1].innerHTML = sex;
                        trDom.children[2].innerHTML = age;
                        document.querySelector('.update').style.display = 'none'
                        table.style.pointerEvents = 'auto'
                    }
                }
            }
        }, true)
    </script>
</body>

</html>